Skip to content

Conversation

thecalamiity
Copy link
Contributor

Prerequisites checklist

What is the purpose of this pull request?

This PR fixes a regression in the no-invalid-properties rule where it incorrectly reports for valid CSS properties containing var() usage within functions like calc().

What changes did you make? (Give an overview)

  • Updated the validation logic to properly handle CSS variables when they appear inside functions.
  • Added tests to verify correct behavior for variables in functions

Related Issues

Fixes #223

Is there anything you'd like reviewers to focus on?

@github-project-automation github-project-automation bot moved this to Needs Triage in Triage Aug 4, 2025
@eslint-github-bot eslint-github-bot bot added the bug Something isn't working label Aug 4, 2025
@lumirlumir lumirlumir added the accepted There is consensus among the team that this change meets the criteria for inclusion label Aug 12, 2025
@lumirlumir lumirlumir moved this from Needs Triage to Implementing in Triage Aug 12, 2025
@nzakas
Copy link
Member

nzakas commented Aug 26, 2025

Can you check the test failures?

Copy link
Contributor

@snitin315 snitin315 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have one false positive, can you please check?

/* eslint css/no-invalid-properties: "error" */

:root { 
    --dynamic-width: calc(20px + 10px); 
    --dynamic-width-2: calc(var(--dynamic-width) + 10px); 
}
  
.div { width: calc(100% - var(--dynamic-width)); } // ok
.div2 { width: calc(100% - var(--dynamic-width-2)); } // Error Unknown property 'width' found

@thecalamiity
Copy link
Contributor Author

@snitin315 I looked into it but wasn't able to reproduce the false positive. To be thorough, I've added a test case for this scenario, and it's currently passing.

Copy link
Contributor

@snitin315 snitin315 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm unable to reproduce that anymore.

LGTM, thanks!

Leavnig it open for 2nd review.

@snitin315 snitin315 moved this from Implementing to Second Review Needed in Triage Sep 23, 2025
Copy link
Member

@nzakas nzakas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Nice work!

@nzakas nzakas merged commit 268c7f0 into eslint:main Sep 23, 2025
22 checks passed
@github-project-automation github-project-automation bot moved this from Second Review Needed to Complete in Triage Sep 23, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accepted There is consensus among the team that this change meets the criteria for inclusion bug Something isn't working contributor pool
Projects
Status: Complete
Development

Successfully merging this pull request may close these issues.

Rule Change: no-invalid-properties incorrectly reports for valid CSS with var() in functions
4 participants